<template>
<div id="auth-manager">
    <my-table
        :list='newAuthList'
    >
        <template v-slot:th>
            <th v-for="item in theadList" :key='item'>{{item}}</th>
        </template>
        <template v-slot:td='{td: {sid, authName, path, levelNumber, authLevel}}'>
            <td>{{sid}}</td>
            <td>{{authName}}</td>
            <td>{{path}}</td>
            <td>
                <div class="tag-layout">
                    <my-tag :level="levelNumber">
                        {{authLevel}}
                    </my-tag>
                </div>
            </td>
        </template>
    </my-table>
</div>
</template>

<script>
import { authList } from '../../config/data'
export default {
    name: "authList",
    data() {
        return {
            authList: []
        }
    },
    created() {
        this.getAuthListData()
    },
    methods: {
        async getAuthListData() {
            let result = await authList()
            this.authList = result.data.authList
        }
    },
    computed: {
        theadList() {
            const list = ["#", "权限名称", "路径", "权限等级"]
            return list;
        },
        newAuthList() {
            return this.authList.map((item, index) => {
                item.sid = index+1
                if(item.authLevel) {
                    switch(item.authLevel) {
                        case "一级":
                            item.levelNumber = 1
                            break;
                        case "二级":
                            item.levelNumber = 2
                            break;
                        case "三级":
                            item.levelNumber = 3
                            break;
                    }
                }
                return item;
            })
        }
    },
}
</script>

<style scoped>
#auth-manager {
    height: 100%;
}
.tag-layout {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>